<template>
  <div style="margin-bottom: 150px">
    <div style="margin-bottom: 150px; position: relative">
      <div class="info-item">
        <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <h3>基本信息：</h3>
          </a-space>
        </div>
        <div style="width: 100%; display: flex; justify-content: center"
          ><a-form style="width: 60%" :model="taskData" auto-label-width>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="posts.post2" label="销售出库单号：">
                  <a-input
                    disabled
                    style="width: 320px"
                    v-model="form.list.number"
                    placeholder=""
                    allow-clear
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="posts.post2" label="客户名称:"
                  ><a-input
                    disabled
                    style="width: 320px"
                    v-model="form.list.clientCompanyName"
                    placeholder=""
                    allow-clear
                /></a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="posts.post2" label="收货人："
                  ><a-input
                    :style="{ width: '320px' }"
                    placeholder="Please enter something"
                    v-model="form.list.consigneeName"
                    disabled
                    allow-clear
                /></a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="posts.post2" label="收货人联系电话：">
                  <a-input
                    :style="{ width: '320px' }"
                    placeholder="Please enter something"
                    v-model="form.list.consigneePhone"
                    disabled
                    allow-clear
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="posts.post2" label="收货人地址：">
                  <a-input
                    :style="{ width: '320px' }"
                    placeholder="Please enter something"
                    v-model="form.list.consigneeAddress"
                    disabled
                    allow-clear
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <!-- <a-form-item field="posts.post2" label="收货人联系电话：">
                  <a-input
                    v-model="form.list.StaffPhone"
                    :style="{ width: '320px' }"
                    placeholder="Please enter something"
                    disabled
                    allow-clear
                  />
                </a-form-item> -->
              </a-col>
            </a-row>

            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item field="posts.post2" label="备注：">
                  <a-textarea
                    disabled
                    v-model="form.list.remark"
                    placeholder="Please enter something"
                    allow-clear
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <div style="width: 100%; display: flex; margin: 20px 50px">
          <a-space>
            <div
              style="
                width: 4px;
                height: 15px;
                background-color: rgba(61, 126, 255, 1);
                border: none;
                border-radius: 2px;
              "
            >
            </div>
            <h3>销售出库明细：</h3>
          </a-space>
        </div>
        <div
          style="
            width: 90%;
            margin-left: 5%;
            box-shadow: 1px 1px 5px rgb(153 153 153 / 35%);
            border-radius: 4px;
          "
        >
          <div style="padding: 30px">
            <div style="text-align: right" class="button-item"></div
            ><a-table
              :data="form.list.OutboundWarehouseItem"
              :pagination="false"
            >
              <template #columns>
                <a-table-column
                  title="物料编码"
                  :width="100"
                  align="center"
                  data-index="productNumber"
                ></a-table-column>
                <a-table-column
                  title="物料名称"
                  :width="100"
                  align="center"
                  data-index="productName"
                ></a-table-column>
                <a-table-column
                  title="规格型号"
                  :width="100"
                  align="center"
                  data-index="spec"
                ></a-table-column>
                <a-table-column
                  title="基本单位"
                  :width="100"
                  align="center"
                  data-index="basicName"
                ></a-table-column>
                <a-table-column
                  title="出库数量"
                  :width="100"
                  align="center"
                  data-index="itemAmount"
                ></a-table-column>

                <a-table-column align="center" :width="150" title="检验类别">
                  <template #cell="{ record }">
                    <a-select
                      v-model="record.detectionType"
                      placeholder="Please select ..."
                    >
                      <a-option :value="3">免检</a-option>
                      <a-option :value="2">全检</a-option>
                      <a-option :value="1">抽检</a-option>
                    </a-select>
                  </template>
                </a-table-column>
                <a-table-column
                  align="center"
                  :width="150"
                  title="状态"
                  data-index="spec"
                >
                  <template #cell="{ record }">
                    <a-select v-model="record.inspectionState">
                      <a-option :value="1">待质检</a-option>
                      <a-option :value="2">质检通过</a-option>
                      <a-option :value="3">质检不通过</a-option>
                    </a-select>
                  </template>
                </a-table-column>
                <a-table-column
                  title="质检意见"
                  :width="200"
                  align="center"
                  data-index="itemAmount"
                >
                  <template #cell="{ record }">
                    <a-textarea
                      placeholder="Please enter something"
                      v-model="record.remark"
                      allow-clear
                    /> </template
                ></a-table-column>
              </template> </a-table
          ></div>
        </div>
      </div>
    </div>
    <div class="box">
      <a-space :size="20">
        <a-button type="outline" @clikc="router.back()">
          <template #default>取消</template>
        </a-button>
        <a-button type="primary" @click="submit">
          <template #default>提交</template>
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    computed,
    onMounted,
    defineAsyncComponent,
  } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import {
    GetPersonnelinformation,
    Getsingleperson,
  } from '@/api/home/System settings/personal-information/index';
  import {
    getOutboundDetails,
    putInspectionState,
  } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';
  import { cloneDeep } from 'lodash';

  const route = useRoute();
  const router = useRouter();
  const id = Number(route.query.id);

  // 获取人员信息
  const Personne = ref();
  const Personnelinformation = async () => {
    const res = await GetPersonnelinformation({ page: 0, size: -1 });
    Personne.value = res.content.data;
  };
  Personnelinformation();

  const tableRef = ref();

  const form = reactive<any>({ list: {} });

  const getData = async () => {
    const res = await getOutboundDetails({ id });
    form.list = res;
  };
  getData();

  // 表格配置
  const args = reactive({
    stripe: false,
    rowSelection: {
      type: 'checkbox',
      showCheckedAll: true,
      onlyCurrent: false,
    },
    scroll: {
      y: 2000,
      x: 500,
    },
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  let taskData = reactive<any>({
    form: {},
  });

  const submit = async () => {
    try {
      await putInspectionState({
        outboundWarehouseItem: form.list.OutboundWarehouseItem,
      });
      getData();
      router.back();
    } catch (err: unknown) {
      console.log(err);
    }
  };
</script>

<style scoped lang="less">
  .basic-item {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(242, 243, 245, 0.852);
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }

  .info-item {
    width: 100%;
  }

  .report-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
  }

  .custom-radio-card {
    padding: 10px 16px;
    border: 1px solid var(--color-border-2);
    border-radius: 4px;
    width: 150px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    display: flex;
  }

  .custom-radio-card-masky {
    height: 17px;
    width: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
    margin-left: 30%;
  }

  .custom-radio-card-maskn {
    height: 17px;
    width: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
    margin-left: 30%;
  }

  .custom-radio-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 100%;
  }

  .custom-radio-card-title {
    color: var(--color-text-1);
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
  }

  .custom-radio-card-shade {
    width: 45px;
    height: 38px;
    border-right: 1px solid var(--color-border-2);
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-shadey {
    width: 105px;
    height: 38px;
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-shaden {
    width: 105px;
    height: 38px;
    background-color: white;
    box-sizing: border-box;
  }

  .custom-radio-card-checked .custom-radio-card-masky {
    border-color: rgb(49, 194, 124);
  }

  .custom-radio-card-checked .custom-radio-card-maskn {
    border-color: rgb(255, 153, 0);
  }

  .custom-radio-card-checked .custom-radio-card-shadey {
    // background-color: var(--color-primary-light-1);
    // ba-color: rgb(49, 194, 124);
    color: white;
    background-color: rgb(49, 194, 124);
  }

  .custom-radio-card-checked .custom-radio-card-shaden {
    // background-color: var(--color-primary-light-1);
    // ba-color: rgb(49, 194, 124);
    color: white;
    background-color: rgb(255, 153, 0);
  }

  .custom-radio-card:hover .custom-radio-card-title,
  .custom-radio-card-checked .custom-radio-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-radio-card-checked .custom-radio-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }

  .order-info {
    width: 95%;
    margin: 20px auto;
  }

  :deep(.arco-form) {
    width: 90%;
  }

  .box {
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid #e4e4e4;
    display: flex;
    justify-content: end;
    width: 100%;
  }

  // :deep(.arco-input-wrapper),
  // :deep(.arco-input[disabled]) {
  //   -webkit-text-fill-color: rgb(0, 0, 0);
  // }

  // :deep(.arco-picker-disabled),
  // :deep(.input[disabled]) {
  //   -webkit-text-fill-color: rgb(0, 0, 0);
  // }
</style>
